<template>
    <v-layout fill-height justify-center class="white">
        <v-flex>
            <input id="previewImg" class="absolute h0 w0 caption" type="file" accept="image/*"
                   @change="previewImg">
            <v-card flat v-if="user">
                <v-carousel v-if="user.imgs" v-model="imgIndex" height="400"
                            hide-delimiter-background
                            :show-arrows="false"
                >
                    <v-carousel-item @click="editHeadImg"
                                     v-for="img in user.imgs"
                                     :src="img.src||$imgUrl+img.img"></v-carousel-item>
                </v-carousel>
                <v-divider></v-divider>
                <v-card-text>
                    <div class="row-y-center">
                        <div class="title mb-1 black--text" :class="{'error--text':user.vipFlag}">
                            {{user.nickname}}
                        </div>
                        <v-btn v-if="!user.idCardStatus || [$const.commonStatus.init,$const.commonStatus.notCertified].includes(user.idCardStatus)"
                               class="ml-3"
                               outlined
                               color="account"
                               small
                               :disabled="user.idCardStatus === $const.commonStatus.notCertified"
                               @click="gotoAuthentication"
                        >
                            <v-icon left>error_outline</v-icon>
                            {{user.idCardStatus === $const.commonStatus.notCertified?'未通过':'未认证'}}
                        </v-btn>
                        <v-btn v-else-if="[$const.commonStatus.audit,$const.commonStatus.certified].includes(user.idCardStatus)"
                               class="ml-3"
                               color="primary"
                               depressed
                               small
                        >
                            <v-icon left>check</v-icon>
                            已认证
                        </v-btn>
                        <v-btn
                                class="ml-3"
                                depressed
                                small
                                :color="!user.vipFlag?'grey lighten-1':'error'"
                                :outlined="!user.vipFlag"
                        >
                            VIP
                        </v-btn>
                        <v-btn
                                v-if="user.yearVipFlag"
                                class="ml-3"
                                depressed
                                small
                                color="warning"
                        >
                            年
                        </v-btn>
                        <v-spacer></v-spacer>
                        <v-menu offset-y>
                            <template v-slot:activator="{ on }">
                                <v-btn icon v-on="on" color="secondary">
                                    <v-icon>more_vert</v-icon>
                                </v-btn>
                            </template>
                            <v-list class="py-0">
                                <v-list-item @click="userSignOut">
                                    <v-list-item-title>登出</v-list-item-title>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-title>关闭</v-list-item-title>
                                </v-list-item>
                            </v-list>
                        </v-menu>
                        <v-dialog
                                v-model="vipDialog"
                                width="500"
                        >
                            <v-card>
                                <v-card-title
                                        class="headline grey lighten-2"
                                        primary-title
                                >
                                    开通会员
                                </v-card-title>

                                <v-card-text>
                                    您已经是会员了

                                    <v-text-field
                                            label="Regular"
                                            single-line
                                            v-model="vipMonthNum"
                                    ></v-text-field>
                                    月
                                </v-card-text>

                                <v-divider></v-divider>

                                <v-card-actions>
                                    <v-btn
                                            color="primary"
                                            text
                                    >
                                        充值
                                    </v-btn>
                                    <v-btn
                                            color="primary"
                                            text
                                            @click="vipDialog=false"
                                    >
                                        I accept
                                    </v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-dialog>
                    </div>
                    <div class="mb-1 mt-2">
                        <v-chip v-if="user.age" small label color="indigo" text-color="white" class="ml-0">
                            {{user.age}}岁
                        </v-chip>
                        <v-chip v-if="user.gender === '女'" small label color="pink" text-color="white" class="ml-1">女
                        </v-chip>
                        <v-chip v-else small label color="blue" text-color="white" class="ml-1">男</v-chip>
                        <v-chip v-if="user.location" small label color="purple" text-color="white" class="ml-1">
                            {{user.location}}
                        </v-chip>
                    </div>
                </v-card-text>
                <v-divider></v-divider>
                <v-subheader class="subtitle-2 green--text text--darken-1">
                    颜值
                </v-subheader>
                <v-card-text class="pt-0 success--text">
                    颜值：
                    <v-chip class="mr-5px" small label color="success" text-color="white">
                        {{user.faceRatio}}分
                    </v-chip>
                    <span class="warning--text">
                    被喜欢次数：
                    </span>
                    <v-chip small label color="warning" text-color="white" class="ml-1">
                        {{user.likeCount}}次
                    </v-chip>
                </v-card-text>
                <v-divider></v-divider>
                <template v-if="user.vipFlag">
                    <v-subheader class="subtitle-2 error--text text--darken-1">
                        会员
                    </v-subheader>
                    <v-card-text class="pt-0 error--text">
                        到期日：
                        <v-chip small label color="error" text-color="white">
                            {{user.vipEndDate | parseDate}}
                        </v-chip>
                    </v-card-text>
                    <v-divider></v-divider>
                </template>

                <v-subheader class="subtitle-2 info--text text--darken-1">
                    清池币
                </v-subheader>
                <v-card-text class="pt-0 info--text">
                    拥有：
                    <v-chip small label color="error" text-color="white">
                        {{Number(user.qcb)}}个<!-- todo清池币 100个1分颜值-->
                    </v-chip>
                </v-card-text>
                <v-divider></v-divider>
                <v-divider></v-divider>
                <v-subheader class="subtitle-2 warning--text text--darken-1">
                    邀请码
                </v-subheader>
                <v-card-text class="pt-0 warning--text">
                    号码：{{user.inviteCode}}
                    <v-btn
                            class="ml-2px"
                            depressed
                            small
                            text-color="white"
                            color="warning"
                            v-clipboard:copy="user.inviteCode"
                    >
                        复制
                    </v-btn>
                </v-card-text>
                <v-divider></v-divider>
            </v-card>

            <v-btn class="bottom-70"
                   color="deep-orange darken-2"
                   dark
                   bottom
                   right
                   fab
                   fixed
                   @click="$refs.userEdit.openDialog()"
            >
                <v-icon>edit</v-icon>
            </v-btn>
            <v-bottom-sheet v-model="sheet">
                <v-list>
                    <label for="previewImg">
                        <v-list-item>
                            <v-list-item-action>
                                <v-icon color="indigo">cloud_upload</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>上传图片</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </label>
                    <v-list-item @click="deleteImg">
                        <v-list-item-action>
                            <v-icon color="indigo">delete</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title>删除图片</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
            </v-bottom-sheet>

            <UserEdit v-if="user" ref="userEdit" @change="editUserChange" v-model="user"></UserEdit>
        </v-flex>
    </v-layout>
</template>

<script lang="ts">
  import UserEdit from '../edit/edit.vue'
  import {Vue, Component, Watch} from 'vue-property-decorator'
  import User from "@/model/User"
  import EXIF from 'exif-js'
  import ImgFile from "@/model/ImgFile"
  import UserImg from "@/model/UserImg"

  import {namespace} from "vuex-class"
  import RouterName from "@/const/RouterName"

  const chatModule = namespace('chat')
  const userModule = namespace('user')

  @Component({
    components: {
      UserEdit
    }
  })
  export default class ChatVue extends Vue {
    //当前展示的图片索引
    imgIndex: number = 0
    sheet: boolean = false
    uploadImg: null
    // 是否显示 提示上传照片
    hasHintImg: boolean = false
    initImgSrc: string = require('@/assets/img/upload_img.png')
    @userModule.State('user') loginUser: User
    user: User = null
    vipDialog: boolean = false
    vipMonthNum: number = null

    created() {
      this.loginUserChange()
    }

    @Watch('loginUser')
    loginUserChange() {
      //如果已经有了User
      if (this.loginUser) {
        this.user = this.$obj.deepClone(this.loginUser)
        if (this.user.imgs.length < 1) {
          this.user.imgs.push({src: this.initImgSrc})
          this.hasHintImg = true
        }
      }
    }

    gotoAuthentication() {
      this.$info("是否前往进行身份认证").then(({result}) => {
        if (result) {
          this.$routerTo(RouterName.authentication)
        }
      })
    }

    toVipVue() {
      this.$routerTo(RouterName.vip)
    }

    userSignOut() {
      this.$token.remove()
      // this.$router.push('/')
      location.href = '/'
    }

    editUserChange(user: User) {
      this.$store.commit('user/setUser', user)
    }

    editHeadImg() {
      this.sheet = true
    }

    previewImg({target}: any) {
      this.sheet = false
      if (this.loginUser.imgs.length > 4) {
        this.$error('最多上传5张照片，请删除后继续！')
        return
      }
      this.$img.getImgObj(target).then((imgObj) => {
        this.uploadImg = imgObj.file
        this.user.imgs.unshift(imgObj)
        if (this.hasHintImg) {
          this.user.imgs.pop()
          this.hasHintImg = false
        }
        this.uploadImgAPI().then(res => {
          //有用是因为删图片是根据名称来删除的
          imgObj.img = res.data.img
          //返回经过后台处理的文件名
          this.$post('user/img/add', res.data).then(res => {
            // this.user = res.data.data
            this.$store.commit('user/setUser', res.data)
          })
        })
      })
    }

    deleteImg() {
      this.sheet = false
      if (this.user.imgs.length > 1) {
        this.$warning('请确认是否删除照片？').then(({result}: any) => {
          if (result) {
            const img = this.user.imgs.splice(this.imgIndex, 1)
            this.$post('user/img/delete', img[0]).then(res => {
              this.$store.commit('user/setUser', res.data)
            })
          }
        })
      } else {
        this.$error('请至少保留一张照片')
      }
    }

    uploadImgAPI() {
      const uploadImg = new FormData()
      uploadImg.append("file", this.uploadImg)
      return this.$post('/upload/img', uploadImg)
    }
  }
</script>
<!--<v-list>
  <v-list-item
      v-for="i in 5"
      :key="i"
      avatar
      @click=""
  >
    <v-list-item-action>
      <v-icon color="pink">star</v-icon>
    </v-list-item-action>

    <v-list-item-content>
      <v-list-item-title>fsadfsdfasdfda</v-list-item-title>
    </v-list-item-content>

    <v-list-item-avatar>
      <img :src="$imgUrl+i+'.jpg'">
    </v-list-item-avatar>
  </v-list-item>
</v-list>-->
<!--<div class="fixed-main flex-col" style="top:56px;bottom: 56px">
      <div class="bg-white pd-15px-3vw flex-main">
          &lt;!&ndash;头像部分&ndash;&gt;
          <div class="flex-row mg-bottom10px">
              <img v-if="user.headImg" class="img-smaller bd-radius5px"
                   @click="showUser(user.id)"/>
              <div class="flex-col mg-left10px">
                  <p class="nickname">{{user.name}}</p>
              </div>
          </div>

          <div class="mg-bottom10px">
              <mu-chip class="demo-chip" v-for="chip, index in chips" :key="chip" color="red">
                  {{chip}}
              </mu-chip>
          </div>

          <div>
              &lt;!&ndash;<mu-slide-picker :slots="addressSlots" @change="addressChange"&ndash;&gt;
              &lt;!&ndash;:values="address"></mu-slide-picker>&ndash;&gt;
              <p>
                  您所在的城市是：{{position.city}}
              </p>
              <mu-icon size="36" value=":mudocs-icon-custom-github"></mu-icon>

          </div>
      </div>
      <div class="flex-footer flex-row">
          <mu-button color="secondary" @click="$store.commit('aplus')" style="width: 50vw">
              私信
              <mu-icon right value="mode_comment"></mu-icon>
          </mu-button>
          <mu-button color="primary" style="width: 50vw">
              <mu-icon left value="favorite"></mu-icon>
              喜欢
          </mu-button>
      </div>
  </div>-->
<!--<v-subheader class="subtitle-1 red--text text--darken-1">
                        我的信息
                    </v-subheader>
                    <v-card-text>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon class="title-small">mdi-gender-male-female</v-icon>
                            </v-btn>
                            <span class="title-small">性别</span>
                        </v-layout>

                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon class="title-small">cake</v-icon>
                            </v-btn>
                            <span class="title-small">年龄</span>
                        </v-layout>

                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon class="title-small">business</v-icon>
                            </v-btn>
                            <span class="title-small">行业</span>
                        </v-layout>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon class="title-small">work</v-icon>
                            </v-btn>
                            <span class="title-small">工作</span>
                        </v-layout>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon>home</v-icon>
                            </v-btn>
                            <span class="title-small">家乡</span>
                        </v-layout>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon>place</v-icon>
                            </v-btn>
                            <span class="title-small">所在地</span>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>


                    <v-subheader class="subtitle-1 red--text text--darken-1">
                        我的话题
                    </v-subheader>
                    <v-card-text>
                        <v-layout align-center>
                            <v-chip small label color="primary" text-color="white" class="ml-0 mr-4">
                                <span class="subtitle-1">#</span>
                            </v-chip>

                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">交朋友</span>
                            </v-chip>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-subheader class="subtitle-1 red--text text--darken-1">
                        我的标签
                    </v-subheader>
                    <v-card-text>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon>label</v-icon>
                            </v-btn>

                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">不冷不酷</span>
                            </v-chip>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-subheader class="subtitle-1 red--text text--darken-1">
                        我的兴趣
                    </v-subheader>
                    <v-card-text>
                        <v-layout align-center>
                            &lt;!&ndash;<v-chip small label color="green" text-color="white" class="ml-0 mr-4 pa-0">
                            </v-chip>&ndash;&gt;
                            <div class="success img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">fitness_center</v-icon>
                            </div>

                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢的运动</span>
                            </v-chip>
                        </v-layout>

                        <v-layout align-center>
                            <div class="primary img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">music_note</v-icon>
                            </div>
                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢的音乐</span>
                            </v-chip>
                        </v-layout>

                        <v-layout align-center>
                            <div class="error img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">fastfood</v-icon>
                            </div>
                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢的食物</span>
                            </v-chip>
                        </v-layout>

                        <v-layout align-center>
                            <div class="primary img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">local_movies</v-icon>
                            </div>
                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢的电影</span>
                            </v-chip>
                        </v-layout>

                        <v-layout align-center>
                            <div class="warning img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">book</v-icon>
                            </div>
                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢看的书</span>
                            </v-chip>
                        </v-layout>

                        <v-layout align-center>
                            <div class="info img-square py-2px px-3px ml-0 mr-4 ">
                                <v-icon class="title-small" color="white">airplanemode_active</v-icon>
                            </div>
                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">喜欢的旅行</span>
                            </v-chip>
                        </v-layout>
                    </v-card-text>
                    <v-subheader class="subtitle-1 red--text text--darken-1">
                        我的问答
                    </v-subheader>
                    <v-card-text>
                        <v-layout align-center>
                            <v-btn icon class="ml-0 mr-4 grey--text">
                                <v-icon>label</v-icon>
                            </v-btn>

                            <v-chip small label color="primary" text-color="white">
                                <span class="subtitle-1">不冷不酷</span>
                            </v-chip>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>-->

<!--<v-list-item class="pb-2">
                        <svg-icon name="voice" class="w30px mr-4"></svg-icon>
                        <v-list-item-content>
                            <v-list-item-title class="title-small grey--text">未上传</v-list-item-title>
                        </v-list-item-content>
                        <v-list-item-action>
                            <v-list-item-action>
                                <v-btn block flat color="blue lighten-1" dark>
                                    上传声音
                                    <v-icon right>cloud_upload</v-icon>
                                </v-btn>
                            </v-list-item-action>
                        </v-list-item-action>
                    </v-list-item>
                    <v-divider></v-divider>-->

<!--<div>
                  vip
                </div>
                <div>
                  朋友圈
                </div>
                <div>
                  信息
                </div>
                <div>
                  个签
                </div>
                <div>
                  爱好
                </div>
                <div>
                  关注话题
                </div>
                <div>
                  问题
                </div>-->
